<template>
  <Main v-if="shows" :type="'form'">
    <Title :title="'成长值设置'" />

    <el-row>
      <el-col :span="24">
        <el-form ref="form" label-width="130px" :model="form" :rules="rules">
          <el-form-item label="成长值名称" prop="name">
            <el-input
              v-model="form.name"
              class="form-input"
              size="medium"
              :maxlength="3"
              placeholder="请输入会员卡名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="计算周期"
            class="add-form-hintColor"
            prop="period"
          >
            <el-select
              v-model="form.period"
              placeholder="请选择"
              class="form-input"
            >
              <el-option
                v-for="(item, index) in 13"
                :key="index"
                :label="index == 0 ? '永久' : `${index}个月`"
                :value="index"
              >
              </el-option>
            </el-select>
            &nbsp;&nbsp;超过该周期的成长值将会清零，选择永久代表不清零
          </el-form-item>
          <el-form-item label="计算时间" class="add-form-hintColor" prop="day">
            每月&nbsp;&nbsp;
            <el-select
              v-model="form.day"
              placeholder="请选择"
              class="form-input"
            >
              <el-option
                v-for="(item, index) in 28"
                :key="index"
                :label="`${item}日`"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="add-form-title">
            <p>动态规则</p>
          </div>
          <el-form-item class="add-form-hintColor" label="消费一元获得">
            <el-input-number
              v-model="form.consume"
              :controls="false"
              :min="0"
              size="medium"
            ></el-input-number>
            &nbsp;&nbsp;消费实付金额，不足1元不计算
          </el-form-item>
          <el-form-item class="add-form-hintColor" label="储值一元获得">
            <el-input-number
              v-model="form.stored"
              :controls="false"
              :min="0"
              size="medium"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <Footer>
      <el-button plain @click="$emit('outs', cardIds)">返 回</el-button>
      <el-button type="primary" @click="submit('save')">确定</el-button>
    </Footer>
  </Main>
</template>
<script>
import { SETGROW } from "../service";
export default {
  props: {
    cardIds: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      form: {
        name: "",
        period: "",
        day: "",
        consume: "",
        stored: ""
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        period: [{ required: true, message: "请输入名称", trigger: "blur" }],
        day: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  created() {
    this.submit();
  },
  methods: {
    async submit(flag) {
      if (flag === "save") {
        await this.$refs["form"].validate(valid => {
          if (valid) {
            SETGROW({
              card_id: this.cardIds,
              flag,
              name: this.form.name,
              period: this.form.period,
              day: this.form.day,
              consume: this.form.consume,
              stored: this.form.stored
            }).then(res => {
              let { code, msg } = res;
              if (code === 200) {
                this.$message.success(msg);
                this.$emit("outs", this.cardIds);
              } else {
                this.$message.error(msg);
              }
            });
          } else {
            return false;
          }
        });
      } else {
        await SETGROW({
          card_id: this.cardIds
        }).then(res => {
          let { code, data, msg } = res;
          if (code === 200) {
            if (data != null) {
              this.form.name = data.name;
              this.form.period = parseInt(data.period);
              this.form.day = parseInt(data.day);
              this.form.consume = parseInt(data.consume);
              this.form.stored = parseInt(data.stored);
            }
          } else {
            this.$message.error(msg);
          }
        });
      }
    }
  }
};
</script>
